<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./jmicro.png">
    <script type="text/javascript" src="./js/rpc.js"></script>
    <script type="text/javascript" src="./js/jquery.js"></script>
    <title>TestPubsub</title>
    <style>

    </style>
  </head>
  <body>
  <div id="msg" style="color:red;"></div>

  <div class="JTestingPubsub" id="testing">
    <div>
      <Button onclick="doLogin()">Login</Button><br/>
      <label for="actName">Account</label>
      <Input id="actName"  placeholder="" value=""/>
      <br/>
      <label for="pwd">Password</label>
      <Input id="pwd" value=""/>
    </div>

    <div class="publishCon">
      <Button  disabled id="sendBtn" onclick="doSend()">Send</Button><br/>
      <label for="Topic">Topic</label>
      <Input id="Topic"  placeholder="" value="/test/topic/01"/>
      <br/>
      <label for="Content">Content</label>
      <Input id="Content"  value="test content"/>
    </div>

    <div class="subscribeCon">
      <Button disabled id="subscribe" onclick="doSubscribe()">Subscribe</Button>
      <br/>
      <label for="Result">Result</label>
      <textarea id="Result"  class='textarea' style="width:60%;height: 70%"></textarea>
    </div>
  </div>
  </body>

<script  type="text/javascript">
    $(function(){
        jm.rpc.init({ip: "jmicro.cn",port:80});
    })

    function doLogin(){
        let actName = $("#actName").val();
        if(!actName || actName.length == 0) {
            $("#msg").text('账号不能为空')
            return;
        }

        let pwd = $("#pwd").val();
        if(!pwd || pwd.length == 0) {
            $("#msg").text('密码不能为空')
            return;
        }

        jm.rpc.login(actName,pwd,(rst,err)=>{
            if(err) {
                $("#msg").text('账号或密码错误')
            }
            $("#sendBtn").removeAttr("disabled","true");
            $("#subscribe").removeAttr("disabled","true");
        });
    }

    function doSend() {

        let content = $("#Content").val();
        if(!content || content.length == 0) {
            $("#msg").text('发送内容不能为空')
            return;
        }

        let topic = $("#Topic").val();
        if(!topic || topic.length == 0) {
            $("#msg").text('主题不能为空')
            return;
        }
        $("#msg").empty();

        window.jm.ps.publishString(topic,content,false,false,null,null)
            .then(rst=>{
                console.log(rst);
            }).catch(err=>{
            console.log(err)
        });
    }

    function msgCallback(msg) {
        if(!msg || msg.length == 0) {
            $("#msg").text("Pubsub topic is disconnected by server");
            this.doSubscribe();
        }else {
            let txt = $("#Result").text();
            $("#Result").text(txt + "\n" + msg.data);
        }
    }

    function doSubscribe(){
        let topic = $("#Topic").val();
        if(!topic || topic.length == 0) {
            this.msg = '主题不能为空';
            return;
        }
        let self = this;
        if(this.subState) {
            window.jm.ps.unsubscribe(topic,msgCallback)
                .then((succ)=>{
                    if(succ==true) {
                        self.subState=false;
                        $("#subscribe").text("Subscribe");
                    } else {
                        console.log(succ);
                    }
                });
        }else {
            window.jm.ps.subscribe(topic,{},msgCallback)
                .then((rst)=>{
                    if(rst >= 0) {
                        self.subState=true;
                        $("#subscribe").text("Unsubscribe");
                    }else {
                        console.log(rst);
                    }
                });
        }
    }
</script>
</html>
